<template>
  <div class="gradeDetail">
    <div class="container">
      <div class="containerHeader">
        <div class="containerHeaderTop">
          <h1>
            成绩详情
          </h1>
          <el-button
            plain
            class="btnStyle"
            @click="backBtn"
          >
            返回
          </el-button>
        </div>
        <div class="containerHeaderBottom">
          <div class="operateBox">
            <span
              style="font-size: 16px;color: #696969;margin-right: 8px;">班级：</span>
            <el-select
              v-model="queryForm.deptId"
              style="margin-right: 32px;"
              clearable
              @change="getExamDetail"
              @clear="getExamDetail"
            >
              <el-option
                v-for="item in deptLsit"
                :key="item.deptId"
                :value="item.deptId"
                :label="item.deptName"
              >

              </el-option>
            </el-select>

            <span
              style="font-size: 16px;color: #696969;margin-right: 8px;">试卷状态：</span>
            <el-select
              v-model="queryForm.performance"
              style="margin-right: 36px;"
              clearable
              @change="getExamDetail"
              @clear="getExamDetail"
            >
              <el-option
                :value="0"
                lable="未提交"
              >未提交</el-option>
              <el-option
                :value="1"
                label="待阅卷"
              >待阅卷</el-option>
              <el-option
                :value="2"
                label="已阅卷"
              >已阅卷</el-option>
            </el-select>

            <img
              src="@/assets/images/reset.png"
              style="cursor: pointer;margin-right: 13px;"
              @click="resetData"
            >
            <span
              style="cursor: pointer;"
              @click="resetData"
            >重置数据</span>
          </div>

          <div class="exportBox">
            <el-button
              class="btnStyle"
              plain
              @click="exportGrades"
              :disabled="examScoreDetail.length===0"
            >导出</el-button>
          </div>

        </div>
      </div>

      <div class="containerBody">
        <div
          class="studentBox"
          v-for="(item) in examScoreDetail"
          :key="item.sid"
        >
          <div
            class="student"
            @click="personalView(item)"
          >
            <img
              :src="item.headPicture"
              alt=""
              v-if="item.headPicture"
            >
            <div
              v-else
              class="name"
            >
              <span>
                {{ item?.sname[0] }}
              </span>
            </div>
            <div
              v-if="item.performance===0"
              class="testpaperStatus0"
            >
              <span>未提交</span>
            </div>
            <div
              v-if="item.performance===1"
              class="testpaperStatus1"
            >
              <span>待阅卷</span>
            </div>
            <div
              v-if="item.performance===2"
              class="testpaperStatus"
            >
              <span>已阅卷</span>
            </div>
          </div>
          <div class="studentName">
            <span>{{ item.sname }}
              <span v-if="item.performance!==1">({{ item.totalScore }}分）</span>
            </span>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
// 引入获取考试成绩详情信息 接口
import { getExamScoreDetail } from '@/api/assessment/exammanage.js'


import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 引入查询部门列表的接口
import { listDept } from '@/api/system/dept.js'

import { exportExcel } from "@/utils/peak-tools.js";

import { ElMessage } from 'element-plus';
const route = useRoute()
const router = useRouter()

const examId = computed(() => route.query.examId)

const queryForm = ref({
  deptId: null,
  performance: null
})

const examScoreDetail = ref([])
async function getExamDetail () {
  const res = await getExamScoreDetail({
    examId: examId.value,
    ...queryForm.value
  })
  console.log(res)
  examScoreDetail.value = res.data.map(item => {
    return {
      ...item,
      totalScore: item.singleChoiceAssessment + item.multipleChoiceAssessment + item.judgeChoiceAssessment + item.fillChoiceAssessment + item.discussChoiceAssessment
    }
  })
}
getExamDetail()

const deptLsit = ref([])
// 查询部门列表
async function getDeptList () {
  const res = await listDept()
  deptLsit.value = res.rows
}
getDeptList()

// 重置数据
function resetData () {
  queryForm.value = {
    deptId: null,
    performance: null
  }
  getExamDetail()
}

function exportGrades () {
  let list = examScoreDetail.value.map(item => {
    return {
      sname: item.sname,
      totalScore: item.totalScore
    }
  })
  let list1 = JSON.parse(JSON.stringify(list))
  exportExcel('学生成绩信息.xlsx', {
    学生姓名: "sname",
    学生成绩: "totalScore",
  }, list1, (sheet) => {
    let columnWidth = [14, 16, 25, 10, 14, 30, 30, 30, 10];
    sheet["!cols"] = columnWidth.map((wch) => ({
      wch,
    }));
    return sheet;
  })
}

function backBtn () {
  router.go(-1)
  resetData()
}

// 个人查看信息
function personalView (data) {
  if (data.performance === 0) {
    return ElMessage({
      message: '试卷暂未提交',
      type: 'warning'
    })
  } else if (data.performance === 1) {
    // 跳转到评分路由
    router.push({
      path: 'givemark',
      query: {
        scoreId: data.scoreId,
        paperId: data.paperId
      }
    })
  } else if (data.performance === 2) {
    router.push({
      path: 'personalview',
      query: {
        scoreId: data.scoreId,
        paperId: data.paperId
      }
    })
  }
}

</script>

<style lang='scss' scoped>
.gradeDetail {
  padding: 32px;
  background-color: #f5f6f9;
  .container {
    min-height: 936px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    .containerHeader {
      height: 152px;
      padding: 24px 32px;
      border-bottom: 1px solid #d4d4d4;
      .containerHeaderTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .containerHeaderBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 28px;
        .operateBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .btnStyle {
        width: 80px !important;
        height: 40px !important;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        width: 32px;
        height: 24px;
        font-size: 16px;
        color: #5974ff;
      }
    }

    .containerBody {
      display: flex;
      flex-wrap: wrap;
      padding: 24px 36px 0 32px;
      .studentBox {
        width: 110px;
        margin-left: 25px;
        margin-top: 24px;
        cursor: pointer;
        .student {
          position: relative;
          width: 110px;
          height: 110px;
          border-radius: 6px 6px 6px 6px;
          cursor: pointer;
          background-color: #5974ff;
          img {
            width: 110px;
            height: 110px;
            border-radius: 6px 6px 6px 6px;
          }
          .name {
            display: flex;
            justify-content: center;
            line-height: 100px;
            font-size: 50px;
            color: #fff;
          }
        }
        .studentName {
          width: 110px;
          font-size: 14px;
          color: #363636;
          margin-top: 12px !important;
          margin: auto;
          text-align: center;
        }
        .testpaperStatus0 {
          position: absolute;
          bottom: 0;
          width: 110px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          color: #ffffff;
          background: #969696;
          border-radius: 0px 0px 6px 6px;
        }
        .testpaperStatus1 {
          position: absolute;
          bottom: 0;
          width: 110px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          color: #ffffff;
          background: #44bd60;
          border-radius: 0px 0px 6px 6px;
        }
        .testpaperStatus {
          position: absolute;
          bottom: 0;
          width: 110px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          color: #ffffff;
          background: #5974ff;
          border-radius: 0px 0px 6px 6px;
        }
      }
    }
  }
}
</style>
